<template>
	<view>
		<view class="" style="height: 30vh;position: relative;">
			<view class="pos-center text-center">
				<image src="../../static/app_logo.png" style="width: 25vw;height: 25vw;"></image>
				<view class="padding-top-sm">
					专招驾驶员
				</view>
			</view>
		</view>
		<view class="margin text-center">
			<button class="bg-orange cu-btn lg" @tap="andiDown">安卓版下载</button>
			<view class="margin-top">
				<button class="bg-orange cu-btn lg" @tap="showModal = true">苹果版下载</button>
			</view>
		</view>
		<view class="margin text-gray padding-top">
			温馨提示：如果您在微信内不能下载，请点击右上角的分享按钮，选择在其他浏览器打开。
		</view>
		<view class="text-center text-sm text-gray" style="position: fixed;width: 100vw;bottom: 70px;">
			因为专注，所以更专业
		</view>

		<view class="cu-modal" :class="showModal?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提示</view>
					<view class="action" @tap="showModal = false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					苹果版 APP 我们正在开发中，您可关注公众号 “驾驶员之声” 登录网页版，查看更多招聘详情
				</view>
			</view>
		</view>

		<view class="cu-modal" :class="showtip?'show':''">
			<view class="cu-dialog padding text-left" style="height: 100vh;width:100vw;background-color: rgba(0,0,0,0.6);">
				<view class="speech-bubble speech-bubble-top padding">
					<view style="margin: 0 auto; width: 40px;height: 40px;border-radius: 50%;position: relative; background-color: rgba(0,0,0,0.6);">
						<text class="cuIcon-more text-white pos-center"></text>
					</view>
					<view class="text-center padding-top">
						点击右上角按钮
						<view class="padding-top-xs">
							然后在手机浏览器中打开
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showModal: false,
				showtip: false,
				downHref: 'https://software-zhonglv.oss-cn-beijing.aliyuncs.com/zhaopin.apk'
			};
		},
		onLoad: function(option) {},
		onShow() {
			var ua = window.navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {
				this.showtip = true
			}
		},
		methods: {
			andiDown() {
				if (typeof androlua == "undefined") {
					window.open(this.downHref);
				} else {
					androlua.appDownLoad();
				}

				return;

				let _url = this.downHref;
				uni.downloadFile({
					url: _url,
					success: (res) => {

					}
				});
			},
		}
	}
</script>
<style>
	.speech-bubble {
		position: absolute;
		right: 2px;
		background-color: #CFCECE;
		width: 200px;
		height: 130px;
		/* 垂直居中 */
		color: #333;
		border-radius: 10px;
		font-family: sans-serif;
	}

	.speech-bubble:after {
		content: '';
		position: absolute;
		background-color: red;
		width: 0;
		height: 0;
		border: 15px solid;
	}

	/* 箭头的位置 */
	.speech-bubble-top:after {
		border-bottom-color: #CFCECE;
		left: 80%;
		bottom: 100%;
		margin-left: -15px;
	}
</style>
